<template>
    <div>

        <div class="login-box" id="login-box">
        <div class="login-title">客户录入信息系统-添加客户</div>
        <!-- <table>
            <table>


                <tr>
                    <td>手机号:</td>
                    <td>
                        <input id="tel" type="text" v-model="tel"/>
                    </td>
                    <td id="checkTel"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button id="submit" v-on:click="dosubmit">登录</button>
                    </td>
                </tr>
            </table>
        </table> -->



<el-form label-width="80px" :model="users" :rules="rules" ref="loginFormRef">
  <el-form-item label="手机号" prop="telNum">
    <el-input prefix-icon="el-icon-eleme" v-model="users.telNum" maxlength="11" placeholder="请输入手机号"></el-input>
  </el-form-item>

  <el-form-item label="姓名" prop="name">
    <el-input prefix-icon="el-icon-eleme" v-model="users.name" placeholder="请输入姓名"></el-input>
  </el-form-item>

  <el-form-item label="身份证号" prop="idCard">
    <el-input prefix-icon="el-icon-eleme" v-model="users.idCard" maxlength="18" placeholder="请输入身份证号"></el-input>
  </el-form-item>
  
  <el-form-item class="btns">
    <!-- <el-button type="primary" round  @click="submitForm('users')">登录</el-button> -->
    <el-button type="primary" round  @click="add">添加</el-button>
    <el-button round @click="resetLoginForm">重置</el-button>
  </el-form-item>
  
</el-form>
    </div>
    <div id="wait" v-show="isShow">
    <div id="text">
      添加中请等待
      </div>
    </div>
    </div>
    
</template>
<script>
export default {
    data(){
       return {
        users:{
          telNum:"",
          name:"",
          idCard:""
        },
        isShow:false
        ,
        rules:{
            name:[
            { required: true, message: '请输入姓名', trigger: 'blur' }

            ]

            ,
          telNum: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入正确长度的手机号码', trigger: 'blur' },
            {pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/,
            message: '请输入正确格式的手机号码',trigger: 'blur'
        }
          ],
          idCard:[
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入正确长度的身份证号', trigger: 'blur' },
          {pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确格式的身份证号',trigger: 'blur'
        }
          ]


        }

       }


    },
    created(){
     
      


    }
    
    ,
    methods:{
// 点击重置按钮，重置登录表单
resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields()
    },
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
          if (valid) {
            alert('submit!在这里写向后台提交数据的方法，并且跳转页面');

          this.$http.post("login",this.users)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        },
        add:function(){
            this.$refs.loginFormRef.validate(
                async   (valid) => {
          if (valid) {
            // alert('submit!在这里写向后台提交数据的方法，并且跳转页面');
            this.isShow=true;
          
            // // const {666 :re}=  await    $http.post("/login",this.users)这是ES6新特性6666
            // //alert(re);666666
            const login=  await    this.$http.post('/users/insertUsers',this.users);

          
            if(login.data.code=='000000'){

                alert(login.data.msg);

                this.$router.push('/list');
                this.isShow=false;
            }else {
                alert(login.data.msg);
                this.isShow=false;
            }

          } else {
            console.log('error submit!!');
            alert('不符合规范，滚');
            return false;
          }
        }

            )


        }
    }
   


}

</script>
<style  scoped>
@import url('../css/style.css');


.btns {
  display: flex;
  justify-content: flex-end;
}
#wait{
  width: 100%;
    height: 5rem;
    background-color: gray;
    text-align: center;
}
</style>